<template>
  <div class="absolute-container bg-grey p-a-mini">
    <BKFlexBox gap="10">
      <BKFlexBox
        gap="10"
        direction="column"
        min-width="300"
        width="25%"
      >
        <BKFlexBoxCell
          height="440"
          fixed
        >
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              排名
            </div>
            <div class="flex-1 overflow-auto">
              <RankList
                :data="rankData"
                :max="1000"
              />
            </div>
          </div>
        </BKFlexBoxCell>
        <BKFlexBoxCell flex="1">
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              环状图
            </div>
            <div class="flex-1 overflow-hidden">
              <BKChart :option="ringOption" />
            </div>
          </div>
        </BKFlexBoxCell>
      </BKFlexBox>
      <BKFlexBox
        gap="10"
        direction="column"
        width="50%"
      >
        <BKFlexBoxCell height="50%">
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              玫瑰图
            </div>
            <div class="flex-1 overflow-hidden">
              <BKChart :option="roseOption" />
            </div>
          </div>
        </BKFlexBoxCell>
        <BKFlexBoxCell
          min-height="300"
          height="50%"
        >
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              3D 环状图
            </div>
            <div class="flex-1 overflow-hidden">
              <BKChart :option="pieOption" />
            </div>
          </div>
        </BKFlexBoxCell>
      </BKFlexBox>
      <BKFlexBox
        gap="10"
        direction="column"
        width="25%"
      >
        <BKFlexBoxCell height="50%">
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              柱状图
            </div>
            <div class="flex-1 overflow-hidden">
              <BKChart :option="barOption" />
            </div>
          </div>
        </BKFlexBoxCell>
        <BKFlexBoxCell height="50%">
          <div class="full-height d-flex-c bg-white br-8">
            <div class="flex-0 area-title">
              折线图
            </div>
            <div class="flex-1 overflow-hidden">
              <BKChart :option="lineOption" />
            </div>
          </div>
        </BKFlexBoxCell>
      </BKFlexBox>
    </BKFlexBox>
  </div>
</template>

<script>
import RankList from '@/components/chart/rank-list'
import { legendColors, getRingOption, getRoseOption, getPie3D, getBarOption } from '@/components/chart/echart-utils'

export default {
  name: 'ChartDemo',
  components: {
    RankList
  },
  data () {
    const mock = [
      { name: '数据1', value: 100 },
      { name: '数据2', value: 50 },
      { name: '数据3', value: 10 }
    ]
    let total = 0
    for (const r of mock) {
      total += r.value
    }
    return {
      rankData: [
        { name: '第一名', number: 1000 },
        { name: '第二名', number: 900 },
        { name: '第三名', number: 800 },
        { name: '第四名', number: 700 },
        { name: '第五名', number: 600 },
        { name: '第六名', number: 400 },
        { name: '第七名', number: 300 },
        { name: '第八名', number: 100 }
      ],
      ringOption: getRingOption({
        color: legendColors,
        data: mock
      }),
      roseOption: getRoseOption({
        color: legendColors,
        data: mock
      }),
      pieOption: getPie3D(mock.map((r, i) => {
        return {
          name: r.name,
          // 高度，数据占比乘以系数得到
          value: r.value * 3 / total,
          // 数据原始值，用于 tooltip 里显示
          raw: r.value,
          // 百分比
          percentage: Math.round(r.value * 100 / total),
          color: legendColors[i]
        }
      })),
      barOption: getBarOption({
        xAxis: mock.map(r => r.name),
        series: [
          {
            name: '系列1',
            type: 'bar',
            color: legendColors[0],
            data: mock.map(r => r.value)
          }
        ]
      }),
      lineOption: getBarOption({
        isArea: true,
        xAxis: mock.map(r => r.name),
        series: [
          {
            name: '系列1',
            type: 'line',
            color: legendColors[1],
            data: mock.map(r => r.value)
          }
        ]
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.area-title {
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  font-weight: 700;
  color: #1f2329;
  position: relative;
  padding-left: 14px;
  border-bottom: 1px solid #eee;

  &::before {
    position: absolute;
    content: "";
    z-index: 1;
    left: 0;
    top: 15px;
    width: 4px;
    height: 20px;
    background: #1a5cd8;
    border-radius: 0 4px 4px 0;
  }
}
</style>
